<template lang="html">
  <div class="register">
    <Header>
       <div class="header-flex" slot="content">
        <mu-icon value="arrow_back" @touchend="$router.go(-1);"></mu-icon>
        <span class="title">注册</span>
        <span class="right">&nbsp;&nbsp;&nbsp;&nbsp;</span>
       </div>
    </Header>
    <div class="img">
      <img src="img/images/ia_100000919.png" alt="">
    </div>
    <mu-container>
      <mu-form ref="form" :model="data" class="mu-demo-form" >
        <mu-form-item label="真实姓名"   prop="username" :rules="usernameRules" label-position="left">
          <mu-text-field  v-model="data.username" prop="username"></mu-text-field>
        </mu-form-item>
        <mu-form-item label="手机号" prop="phone" :rules="phoneRules" label-position="left">
          <mu-text-field type="number" v-model="data.phone" prop="phone"></mu-text-field>
        </mu-form-item>
        <mu-form-item class="codeText" label="验证码" prop="yzm" :rules="codeRules" label-position="left">
          <div class="codeFlex" style="display:flex;  justify-content: space-between; ">
            <mu-text-field type="number" v-model="data.yzm" prop="yzm" ></mu-text-field>
            <mu-button 
              color="primary" 
              :class="{ choose: codeState === 1 }"
              @click="clickCode">{{codeState === 0 ? '获取验证码' : (codeState === 1 ? time+'s': '重新发送验证码')}}
            </mu-button>
          </div>
        </mu-form-item>
        <mu-form-item label="账号密码" prop="password" :rules="passwordRules" label-position="left">
          <mu-text-field type="password" v-model="data.password" prop="password" autocomplete="on"></mu-text-field>
        </mu-form-item>
        <mu-form-item label="推荐人手机号" prop="pphone" label-position="left" help-text="推荐人没有可不填">
          <mu-text-field type="number" v-model="data.pphone" prop="pphone"  ></mu-text-field>
        </mu-form-item>
        <mu-form-item prop="isAgree" :rules="argeeRules" class="agree">
          <div class="mu-form-item-label"></div> 
          <mu-checkbox label="同意用户协议" v-model="data.isAgree"  ></mu-checkbox>
          <router-link to="/protocol" style="color:#6096F4">阅读查看</router-link>
        </mu-form-item>
        <mu-form-item   class="btns">
          <div class="mu-form-item-label"></div> 
          <mu-button color="primary" @click="submit" class="subBtn">提交</mu-button>
          <mu-button @click="clear">重置</mu-button>
        </mu-form-item>
      </mu-form>
    </mu-container>
    <Alert :data="alert"></Alert>
  </div>
</template>
<script lang="js">
// 引入校验规则
import { notEmpty, mustChecked, checkPhone, checkPassword } from '../tools/validators.js';
// 引入弹框组件
import Alert from '../components/Alert';
// 引入头部组件
import Header from '../components/Header';
 // 失败弹框样式
let errorAlert = {
    show: true,
    iconType: 'warning',
    text: '失败',
    color: 'error'
  }
let successAlert = {
      show: true,
      iconType: 'check_circle',
      text: '成功',
      color: 'success'
    };
// 暴露数据
export default  {
  // 组件名称
  name: 'register',
  //接收数据
  props: [],//111
  // 注册组件
  components: { Alert, Header },
  mounted() {

  },
  data () {
    return {
        // 表单数据
        data: {
          username: '',
          phone: '',
          yzm: '',
          password: '',
          pphone: '',
          isAgree: false
        },
        // 校验规则
        // 姓名校验
        usernameRules: [
          {validate: notEmpty, message: '必须填写用户名'}
        ],
        // 手机校验
        phoneRules: [
          {validate: notEmpty, message: '必须填写手机号'},
          {validate: checkPhone, message: '手机号码格式不正确'}
        ],
        // 验证码校验
        codeRules: [
          {validate: notEmpty, message: '必须填写验证码'}

        ],
        // 密码校验
        passwordRules: [
          {validate: notEmpty, message: '必须填写密码'},
          {validate: checkPassword, message: '密码长度大于3小于25'}
        ],
        // 用户协议校验
        argeeRules: [
            {validate: mustChecked, message: '必须同意用户协议'}
        ],
        // 发送验证码状态(0为初始状态,1为倒计时状态,2为重新发送阶段)
        codeState: 0,
        // 倒计时间
        time: 60,
        // 弹框相关属性
        alert: {
          // 弹框是否显示
          show: false,
          // 弹框类型
          iconType: 'warning',
          // 弹框显示文字
          text: '失败',
          // 弹框颜色
          color: 'error'
        }
        
    }
  },
  methods: {
    // 点击提交数据的方法111
    submit() {
      // console.log(this.$refs)
      // 表单校验
      this.$refs.form.validate()
          .then( res => {
            // 验证成功
            if(res) {
              // 发送请求
              // console.log(this.data)
              this.$http
                  .post('/api/user/register', this.data)
                  .then( ({ data }) => {
                      // 注册成功
                    if(data.code === 0) {
                      // 跳转页面
                      this.$router.replace('/login')
                      // 验证码错误
                    } else {
                      // 提示失败
                      this.textAlertshow(errorAlert, '注册失败,请检查填写的信息');
                    }
                  })
            }
          })

    },
    // 清空数据的方法
    clear() {
      // 将数据清空
        for(let key in this.data) {
            this.data[key] = ''
        }
        // 将阅读协议改为false
        this.data.isAgree = false;
    },
    
    // 点击发送验证码
    clickCode() {
      // 获取手机号码输入框
      let phoneNum = this.data.phone;
      // 验证手机号
      // 如果还没输入手机号
        if(!notEmpty(phoneNum)) {
        // 弹框提示失败信息
        this.textAlertshow(errorAlert, '请输入手机号');
        // 终止执行
        return 
        // 输入手机号码不符合规范
        }
        if(!checkPhone(phoneNum)){
          // 提示用户 
          this.textAlertshow(errorAlert, '请输入正确的手机号');
          // 终止执行
          return;
        }
        // 手机号输入正确
        // 改变发送验证码状态为倒计时状态
        this.codeState = 1;
        // console.log(this.codeState)
        // 发送的数据
        // console.log(this.data.phone)
        let obj = {
          phone: this.data.phone,
          // 注册type类型为1
          type: 1
        }
        // 发送请求
        this.$http
            .post('/api/code/sendCode', obj)
            // 监听数据返回
            .then( ({ data }) => {
              console.log(data)
              // 成功
              if(data.code === 0) {
                // 弹框显示成功信息
                  this.textAlertshow(successAlert, data.msg)
                // 发送验证码失败
              }else{
                  // 弹框提示用户
                  this.textAlertshow(errorAlert, data.msg)
                
              }
            })
        // 倒计时
        let timer = setInterval(() => {
                    // 倒计时
                    this.time -= 1
                    // 如果倒计时完成
                    if(this.time === 0) {
                      // 清除定时器
                      clearInterval(timer)
                      // 改变验证码阶段为重新发送阶段
                      this.codeState = 2;
                      // 恢复时间计时
                      this.time = 60;
                    }
                  }, 1000);
    },
    // 显示文本提示框显示方法
      textAlertshow(props, text ) {
        // 变为显示状态
        props.show = true;
        // 提示文本修改
        props.text = text;
        // 传递属性
        this.alert = props;
        // 定时关闭
        setTimeout(() => {
          // 改变显示状态
          this.alert.show = false;
        }, 3000);
      }
  }
}
</script>
<style lang="scss">
.register {
  text-align: center;
  .header-flex {
    display: flex;
    align-items: center;
    .title {
      text-align: center;
      flex: 1;
    }
  }
  .img {
    padding-top: 2.6rem;
    padding-bottom: 1.2rem;
    img {
      width: 11.25rem;
    }
  }
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    .mu-form-item {
      margin-bottom: 0;
      .mu-form-item-label {
        width: 6.25rem;
        text-align: left;
      }
    }
    .codeText {
      height: 3.2rem;

      .mu-form-item-label {
        line-height: 2.25rem !important;
      }
      .mu-form-item-content {
        height: 2.25rem;
        margin-bottom: 0.5rem;
        .codeFlex {
          height: 2.25rem;
          margin-top: 0;
          button {
            margin: 0 0 0 2rem;
          }
        }
      }
    }
    .agree {
      .mu-form-item-help {
        left: 6.25rem !important;
      }
    }
    .btns {
      margin-top: 1rem;
    }
    .subBtn {
      margin-left: 0;
    }
  }
  .choose {
    background-color: #e6e6e6;
    color: #a1a1a1;
  }
}
</style>
